<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="system-title">实验室预约管理系统</view>
		<!-- <view class="welcome">welcome!</view> -->
		<view class="bg bg-color-base"></view>

		<view class="info">
			<view class="info-box" :class="{active_register:loginIndex==1}">
				<image class="showImg" src="/static/banner-icon.png" mode=""></image>
				<!--登录切换 -->
				<view class="change-box">
					<view class="c-content">
						<text class="font-login" :class="{active_login:loginIndex==0}"
							@click="handleChangeIndex(0)">登录</text>
						<text class="admin-login" :class="{active_login:loginIndex==1}"
							@click="handleChangeIndex(1)">注册</text>

					</view>
				</view>
				<!-- 表单部分 -->
				<view class="form-box">
					<!-- 登录盒子 -->
					<view class="login-box" v-show="loginIndex==0">
						<!-- 账号 -->
						<u--form :rules="rules1" :model="loginForm" ref="logForm" labelWidth="0">
							<u-form-item prop="account">
								<u--input placeholder="账号" prefixIcon="account" v-model="loginForm.account"></u--input>

							</u-form-item>
							<!-- 密码 -->
							<view class="pasd-item">
								<u-form-item prop="password">
									<u-input placeholder="密码" type="password" prefixIcon="lock" v-if="!showLPsd"
										v-model="loginForm.password">

										<template slot="suffix">
											<u-icon name="eye" size="25" @click.native="handelPsdShow(1)"
												v-if="showLPsd"></u-icon>
											<u-icon name="eye-off" size="25" v-if="!showLPsd"
												@click="handelPsdShow(1)"></u-icon>
										</template>

									</u-input>
									<u-input placeholder="密码" type="text" prefixIcon="lock" v-if="showLPsd"
										v-model="loginForm.password">

										<template slot="suffix">
											<u-icon name="eye" size="25" @click.native="handelPsdShow(1)"
												v-if="showLPsd"></u-icon>
											<u-icon name="eye-off" size="25" v-if="!showLPsd"
												@click="handelPsdShow(1)"></u-icon>
										</template>

									</u-input>

								</u-form-item>

							</view>

						</u--form>
						<!-- 					<view class="form-input">
							<u--input placeholder="账号"  prefixIcon="account" 
								v-model="loginForm.account"></u--input>
						</view>
						<view class="form-input">
							<u--input placeholder="密码" :password="true"  prefixIcon="lock"
								v-model="loginForm.password"></u--input>
						</view> -->
						<view class="login-btn">
							<u-button type="primary" text="立即登录" @click="handleLogin"></u-button>
						</view>
						<view class="form-tip">
							<!-- <u--text type="info" text="忘记密码" size="13"></u--text> -->
							<u--text type="primary" text="后台管理" size="13" align="right" @click="handleToAmin"></u--text>
						</view>
					</view>
					<!-- 注册盒子 -->
					<view class="register-box" v-show="loginIndex==1">
						<u--form :rules="rules" :model="regForm" ref="regForm" labelWidth="0">
							<u-form-item prop="roleId" @click="showRole=true">
								<u--input placeholder="身份" prefixIcon="fingerprint" suffixIcon="arrow-right"
									disabledColor="#ffffff" disabled v-model="roleName">
								</u--input>

							</u-form-item>
							<!-- 工号/学号 -->
							<u-form-item prop="userId">
								<u--input :placeholder="roleTitle" prefixIcon="bag" v-model="regForm.userId"></u--input>
							</u-form-item>
							<u-form-item prop="nickName">
								<u--input placeholder="昵称" prefixIcon="heart" v-model="regForm.nickName"></u--input>
							</u-form-item>
							<u-form-item prop="account">
								<u--input placeholder="账号" prefixIcon="account" v-model="regForm.account"></u--input>
							</u-form-item>
							<u-form-item prop="mobile">
								<u--input placeholder="电话" prefixIcon="phone" v-model="regForm.mobile"></u--input>
							</u-form-item>
							<u-form-item prop="password">
								<u-input placeholder="密码" type="password" prefixIcon="lock" v-if="!showRPsd"
									v-model="regForm.password">
									<template slot="suffix">
										<u-icon name="eye" size="25" @click.native="handelPsdShow(2)"
											v-if="showRPsd"></u-icon>
										<u-icon name="eye-off" size="25" v-if="!showRPsd"
											@click.native="handelPsdShow(2)"></u-icon>
									</template>
								</u-input>
								<u-input placeholder="密码" type="text" prefixIcon="lock" v-if="showRPsd"
									v-model="regForm.password">
									<template slot="suffix">
										<u-icon name="eye" size="25" @click.native="handelPsdShow(2)"
											v-if="showRPsd"></u-icon>
										<u-icon name="eye-off" size="25" v-if="!showRPsd"
											@click.native="handelPsdShow(2)"></u-icon>
									</template>
								</u-input>

							</u-form-item>


							<u-form-item prop="rePassword">
								<u-input placeholder="确认密码" type="password" v-if="!showRePsd" prefixIcon="lock-fill"
									v-model="regForm.rePassword">
									<template slot="suffix">
										<u-icon name="eye" size="25" @click.native="handelPsdShow(3)"
											v-if="showRePsd"></u-icon>
										<u-icon name="eye-off" size="25" v-if="!showRePsd"
											@click.native="handelPsdShow(3)"></u-icon>
									</template>
								</u-input>
								<u-input placeholder="确认密码" type="text" prefixIcon="lock-fill" v-if="showRePsd"
									v-model="regForm.rePassword">
									<template slot="suffix">
										<u-icon name="eye" size="25" @click.native="handelPsdShow(3)"
											v-if="showRePsd"></u-icon>
										<u-icon name="eye-off" size="25" v-if="!showRePsd"
											@click.native="handelPsdShow(3)"></u-icon>
									</template>
								</u-input>
							</u-form-item>
						</u--form>
						<!-- <view class="form-input">

							<u--input placeholder="身份"  prefixIcon="fingerprint"
								v-model="loginForm.account"></u--input>
						</view>
						<view class="form-input">
							<u--input :placeholder="roleTitle"  prefixIcon="bag"
								v-model="loginForm.password"></u--input>
						</view>
						<view class="form-input">
							<u--input placeholder="昵称"  prefixIcon="heart"
								v-model="loginForm.password"></u--input>
						</view>
						<view class="form-input">
							<u--input placeholder="账号"  prefixIcon="account"
								v-model="loginForm.accounnt"></u--input>
						</view>
						<view class="form-input">
							<u--input placeholder="密码" :password="true"  prefixIcon="lock"
								v-model="loginForm.password"></u--input>
						</view>
						<view class="form-input">
							<u--input placeholder="确认密码" :password="true"  prefixIcon="lock-fill"
								v-model="loginForm.password"></u--input>
						</view>
						<view class="login-btn">
							<u-button type="primary" text="立即注册" @click="handleLogin"></u-button>
						</view> -->
						<view class="register-btn">
							<u-button type="primary" text="立即注册" @click="handleRegister"></u-button>
						</view>
					</view>

				</view>
			</view>

		</view>


		<u-action-sheet :show="showRole" :actions="actions" title="请选择身份" @close="showRole = false"
			@select="roleSelect">
		</u-action-sheet>
		<!-- <u-notify ref="uNotify"></u-notify> -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		setToken
	} from '../../utils/auth.js'
	import {
		Login,
		Register,
		checkOnly
	} from '../../api/user.js'
	export default {
		data() {
			return {
				// 是否显示确认密码
				showRePsd: false,
				// 是否显示注册密码
				showRPsd: false,
				// 是否显示登录密码
				showLPsd: false,
				// 登录密码输入框的类型
				loginPsdType: "password",
				// 注册密码输入框的类型
				loginRsdType: "password",
				// 确认密码输入框的类型
				loginPesdType: "password",
				// 是否是唯一的账号
				isOnlyAcc: false,
				// 当前身份名称
				roleName: "",
				// 身份数据
				actions: [{
						name: '教师',
						value: 1
					},
					{
						name: '学生',
						value: 2
					},
					{
						name: '管理员',
						value: 0
					},

				],

				// 是否展示角色选择
				showRole: false,
				// 登录表单验证
				rules1: {
					account: [{
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur']
					}],
					password: [{
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur']
					}],
				},
				// 注册表单验证规则
				rules: {
					roleId: [{
						type: 'number',
						required: true,
						message: '请选择身份',
						trigger: ['change', 'blur']
					}],
					'userId': {
						type: 'string',
						required: true,
						message: '请填写工号',
						trigger: ['blur']
					},
					'nickName': {
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur']
					},
					mobile: [{
							type: 'string',
							required: true,
							message: '请填写电话',
							trigger: ['blur']
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								// 过滤第一层，先判断输入为不为空，因为required: false，不是必填项，所以为空应该返回true
								if (value) {
									return this.$u.test.mobile(value);
								} else {
									return true
								}
							},
							message: '请输入正确的电话号码',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					],
					account: [{
							type: 'string',
							required: true,
							message: '请填写账号',
							trigger: ['blur']
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								if (value) {
									let i = 0;
									// 循环校验每一个字符是不是中文
									for (i = 0; i < value.length; i++) {
										if (this.$u.test.chinese(value[i])) {
											return false;
										}
									}
									return true;
								} else {
									return true
								}
							},
							message: '请不要输入汉字',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								var reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{4,16}$/
								return reg.test(value);
							},
							message: '账号包含4到16位字符，且必须包含数字和字母',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						},
						{
							// 自定义验证函数，见上说明
							asyncValidator: (rule, value, callback) => {

								checkOnly(value).then(res => {
									if (!res.data) {
										callback(new Error('该账号已存在'));
									} else {
										// 如果校验通过，也要执行callback()回调
										callback();
									}
								})

							},

							// 触发器可以同时用blur和change
							trigger: ['blur', "change"],
						}
					],


					password: [{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								var reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{6,}$/
								return reg.test(value);
							},
							message: '密码至少包含6位字符，且必须包含数字、字母和特殊符号',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					],
					rePassword: [{
						type: 'string',
						required: true,
						message: '请确认密码',
						trigger: ['blur']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return value == this.regForm.password;
						},
						message: '两次密码不一致',
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					}]
				},
				// 显示工号还是学号
				roleTitle: "工号",
				// 是否是登录
				loginIndex: 0,
				// 登录表单
				loginForm: {
					account: "",
					password: ""
				},
				// 注册表单
				regForm: {
					roleId: "",
					userId: ""
				},

			}
		},
		methods: {

			// 跳转到后台登录页
			handleToAmin() {
				uni.reLaunch({
					url: "/subpages/admin-login/admin-login"
				})
			},
			// 切换点击事件 
			handleChangeIndex(index) {
				// console.log("我被点击了");
				this.loginIndex = index
			},
			// 处理密码显示与隐藏
			handelPsdShow(type) {
				// console.log(type);
				if (type == 1) {
					this.showLPsd = !this.showLPsd
					if (this.showLPsd) {
						this.loginPsdType = "text"
					} else {
						this.loginPsdType = "password"
					}
				} else if (type == 2) {
					this.showRPsd = !this.showRPsd
					if (this.showRPsd) {
						this.loginRsdType = "text"
					} else {
						this.loginRsdType = "password"
					}
				} else if (type == 3) {
					this.showRePsd = !this.showRePsd
					if (this.showRePsd) {

						this.loginPesdType = "text"

					} else {
						this.loginPesdType = "password"
					}

				}
			},
			// 检验账号唯一性
			async handleCheckOnly() {

				if (!this.regForm.account) {
					return
				} else {
					let res = await checkOnly(this.regForm.account)
					this.isOnlyAcc = res.data
					console.log(this.regForm.account);
					console.log(res.data);

				}

			},
			// 注册
			handleRegister() {
				this.$refs.regForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					Register(this.regForm).then(res => {
						this.regForm = {
							roleId: "",
							userId: ""
						}
						uni.$u.toast('注册成功')
						this.loginIndex = 0
						this.roleTitle = "工号"

					}).catch(err => {})
				}).catch(error => {

					uni.$u.toast('请输入所有必填项')
				})
			},

			// 身份选择
			roleSelect(item) {
				// console.log(item);
				this.roleName = item.name
				this.regForm.roleId = item.value
				this.$refs.regForm.validateField("roleId")
				if (this.regForm.roleId == 2) {
					this.roleTitle = "学号"
				} else {
					this.roleTitle = "工号"
				}

			},
			// 登录
			handleLogin() {
				this.$refs.logForm.validate().then(res => {
					// console.log(this.loginForm);

					Login(this.loginForm).then(res => {
						let roleId = res.data.accountInfo.roleId
						if (roleId == 0) {
							uni.$u.toast('非前台用户账号')
							return
						} else {
							// uni.$u.toast('登录成功')
							this.$refs.uToast.show({
								type: 'success',
								message: "登录成功",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							})
							// 跳转到前台首页
							uni.switchTab({
								url: "/pages/index/index"
							})
							// 清空登录表单数据
							this.loginForm = {
								account: "",
								password: ""
							}
							// 登录成功后要将token存入缓存当中
							console.log(res.data);
							setToken(res.data.token)
							// 将用户数据存入到缓存当中
							uni.setStorageSync('user', res.data.accountInfo)
							uni.setStorageSync('tuser', res.data.user)
						}
						// console.log(res);

					}).catch(err => {
						// console.log(err);
					})
				}).catch(err => {
					uni.$u.toast('请输入所有必填项')
				})

			}
		},

		onReady() {
			uni.hideHomeButton()
			// 设置表单校验规则 否则表单校验无效
			this.$refs.regForm.setRules(this.rules);
			this.$refs.logForm.setRules(this.rules1);

		},
		onShow() {
			// 隐藏首页返回按钮
			// uni.hideHomeButton()

		},
		onLoad() {
			uni.hideHomeButton()

		},
		mounted() {

			// var a = document.getElementsByClassName('uni-page-head-hd')[0]
			// a.style.opacity = 0;
			// console.log(window);
		},

	}
</script>

<style lang="scss">
	.container {
		// width: 100vh;
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #fff;
	}



	// 标题
	.system-title {
		width: 100%;
		position: absolute;
		top: 0upx;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		font-weight: 700;
		text-align: center;
		font-size: 50upx;
		z-index: 9;
		letter-spacing: 10upx;

	}

	// 欢迎
	.welcome {
		width: 100%;
		position: absolute;
		top: 100upx;
		left: 113upx;
		color: #fff;
		font-weight: 700;
		font-size: 60upx;
		z-index: 9;
		font-family: "宋体";
	}

	.info {
		box-sizing: border-box;
		position: relative;
		width: 100%;
		min-height: 600upx;
		padding: 0 20upx;
		margin-top: -150upx;

		.showImg {
			position: absolute;
			top: -200rpx;
			right: -11rpx;
			width: 440rpx;
			height: 285rpx;
			z-index: 999;
		}

		.info-box {
			// overflow: hidden;
			display: inline-block;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 15rpx rgba(35, 171, 242, .3);
			border-radius: 25upx;


			.change-box {
				position: absolute;
				top: 0;
				width: 100%;
				height: 152upx;
				// background-color: pink;
				// border-radius: 25upx;
				border-top-left-radius: 25upx;
				border-top-right-radius: 25upx;

				.c-content {
					width: 100%;
					height: 90upx;
					font-family: "微软雅黑";
					font-size: 40upx;
					// font-weight: 700;
					margin-top: 12upx;
					padding-left: 40upx;
					display: -webkit-flex;
					display: flex;
					flex-direction: row;
					line-height: 100upx;

					.clogin {
						font-size: 50upx;
						color: #5064eb;
						text-align: center;
					}

					text {
						border-bottom: 2px solid transparent;
					}

					.active_login {
						color: #5064eb;
						border-bottom: 2px solid #5064eb;
					}

					.font-login {
						margin-right: 55upx;
					}

					.admin-login {}
				}
			}

			.form-box {
				box-sizing: border-box;
				width: 100%;
				min-height: 450upx;
				// background-color: pink;
				margin-top: 130upx;
				padding: 0 30upx;
				padding-bottom: 30upx;

				.login-box {
					width: 100%;
					height: 100%;

					.pasd-item {
						width: 100%;
						position: relative;

						.item-eye {
							position: absolute;
							right: 13upx;
							top: 32upx;
							z-index: 9;
						}
					}

					.login-btn {
						margin-top: 20upx;
					}
				}

				.register-box {
					width: 100%;
					height: 100%;

					.register-btn {
						margin-top: 20upx;
					}

					.test {
						position: relative;
					}
				}

				.form-input {
					margin-bottom: 40upx;
				}

				.form-tip {
					margin-top: 30upx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
			}
		}

		// 注册的时候可以往下一点点
		.active_register {
			margin-bottom: 100upx;
		}
	}


	.bg {
		position: relative;
		width: 750upx;
		height: 400upx;




	}

	.tab {
		position: absolute;
		top: 250upx;
		left: 20upx;
		right: 20upx;
		height: 150upx;
		padding: 0 50upx;
		background-color: #fff;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		box-shadow: 0 0 3px rgba(255, 255, 255, .3);

		&-bg {
			position: absolute;
			top: -200upx;
			right: -50upx;
			width: 440upx;
			height: 285upx;
		}
	}

	.line {
		width: 25upx;
		height: 7upx;
	}

	.login,
	.register {
		padding: 0 60upx;
	}

	.input {
		width: 630upx;
		height: 90upx;
		padding: 0 30upx;
		background-color: rgba(80, 100, 235, 0.1);
		// border-radius: 50%;
		border-radius: 45upx;

		&-icon {
			width: 30upx;
			height: 38upx;
		}

		&-placeholder {
			color: #5064eb;
		}
	}

	.button {
		width: 630upx;
		height: 90upx;
		margin-left: 60upx;
		border-radius: 45upx;
	}

	.separator {
		height: 2upx;
		margin: 0 30upx;
		background-color: #f5f5f5;
	}

	.other {
		&-items {
			padding: 0 200upx;
		}

		&-icon {
			width: 50upx;
			height: 50upx;
		}


	}
</style>